<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2022/5/7
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2022/5/7
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href="">演示</a>
				<a>
					<cite>导航元素</cite></a>
			</span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="用户ID" name="start" id="findUserId">
            <input class="layui-input" placeholder="用户名" name="end" id="findUserName">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                    class="layui-icon" onclick="findUser()">&#xe615;</i></button>
        </div>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','/manage-user-add',600,400)"><i
                class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px" id="total">共有：88 个用户</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>姓名</th>
            <th>手机</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>用户名</th>
            <th>加入时间</th>
            <th>权限</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">


        </tbody>
    </table>

    <div class="page">
        <div>
            <span id="row"></span>
            <a class="prev" href="javascript:prePage()">上一页</a>
            <span class="current" id="curPage"></span>
            <a class="num" href="" id="totalPage"></a>
            <a class="next"  href="javascript:nextPage()">下一页</a>
        </div>
    </div>
</div>
</body>
<script>


    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    function delAll() {
        //获取复选框的数据
        var data = tableCheck.getData()
        //拼接ID
        var bitId = "";
        console.log(data)
        for(var i = 0;i < data.length;i++){
            bitId += data[i] + ",";
        }
        $.ajax({
            url:"manageUser/manage-delAllUser",
            type:"post",
            data:{
                bitId:bitId
            },
            dataType:"json",
            success:function (rs) {
                if (rs.code == 200){
                    $(".layui-form-checkbox").not(".header").parents("tr").remove();
                    layer.msg(rs.msg,{
                        icon:1,
                        time:1000
                    })
                }else {
                    layer.msg(rs.msg,{
                        icon:2,
                        time:1000
                    })
                }
            }
        })
    }

    //判断当前是全部还是查询
    var index = 0;

    //定义当前页数
    var page = 1;
    //每页显示条数
    var num = 4;

    var page1 = 1;
    //总页数
    var totalPage = 0;

    $(function () {
        loadData();
    })

    //定义执行函数
    function loadData() {
        $.ajax({
            url:"/manageUser/manage-userList",
            type:"get",
            dataType:"json",
            data:{
                page:page,
                num:num
            },
            success:function (rs) {
                console.log(rs)
                index = 0;
                page1 = 1;
                //判断当前状态码是否为200
                if (rs.code == 200){
                    data(rs)
                }
            }
        })
    }

    function findUser(){
        var userId = $("#findUserId").val();
        var username = $("#findUserName").val();
        $.ajax({
            url:"/manageUser/manage-findUser",
            type:"get",
            dataType:"json",
            data:{
                userId:userId,
                username:username,
                page:page1,
                num:num
            },
            success:function (rs) {
                index = 1;
                page = 1;
                //判断当前状态码是否为200
                if (rs.code == 200){
                    data(rs)
                }
            }
        })
    }

    function data(rs) {
        var html = "";
        //1、显示总条数
        $("#total").text("共" + rs.data.total + "条");
        //2、显示总页数
        $("#totalPage").text("共" + rs.data.totalPage + "页");
        totalPage = rs.data.totalPage
        //3、当前页
        if(index == 1){
            $("#curPage").text("当前第" + page1 + "页");
        }else {
            $("#curPage").text("当前第" + page + "页");
        }

        //4、每页显示条数
        $("#row").text("每页" + num + "条");
        //5、循环遍历渲染表格中的数据
        for (var i = 0;i < rs.data.list.length;i++){
            html += "<tr>" + "<td><div class='layui-unselect layui-form-checkbox' lay-skin='primary' data-id='" + rs.data.list[i].user.userId + "'>" +
                "<i class='layui-icon'>&#xe605;</i></div></td>"
                + "<td>" + rs.data.list[i].user.userId + "</td>"
                + "<td>" + rs.data.list[i].user.name + "</td>"
                + "<td>" + rs.data.list[i].user.phone + "</td>"
                + "<td>" + rs.data.list[i].user.email + "</td>"
                + "<td>" + rs.data.list[i].user.address + "</td>"
                + "<td>" + rs.data.list[i].user.username + "</td>"
                + "<td style='display: none'>" + rs.data.list[i].user.password + "</td>"
                + "<td>" + rs.data.list[i].user.joinData + "</td>"
                + "<td>" + rs.data.list[i].role+ "</td>"
                + "<td class='td-manage'>"
                + "<a title='编辑' style='float: left' onclick='update(this)' href='javaScript:;'>" + "<i class='layui-icon'>&#xe642;</i></a>"
                + "<a title='删除' style='float: right' onclick='userDelete(this)'>" + "<i class='layui-icon'>&#xe640;</i></a>"
                + "</td>"
                + "</tr>"

        }
        $("#tb").html(html);
    }
    //上一页的实现
    function prePage() {
        if (index == 1){
            page1--;
            if (page1 < 1){
                page1 = 1;
            }
            findBook()
        }
        if (index == 0){
            page--;
            if (page < 1){
                page = 1;
            }
            loadData();
        }

    }

    //下一页的实现
    function nextPage() {
        if (index == 1){
            page1++;
            if (page1 > totalPage){
                page1 = totalPage;
            }
            findBook()
        }
        if (index == 0){
            page++;
            if (page > totalPage){
                page = totalPage;
            }
            loadData();
        }
    }



    //修改数据回显并渲染到文本框
    function update(obj) {
            var userId = $(obj).parent().parent().find("td").eq(1).text();
            localStorage.setItem("userId",userId);
            var name = $(obj).parent().parent().find("td").eq(2).text();
            localStorage.setItem("name",name);
            var phone = $(obj).parent().parent().find("td").eq(3).text();
            localStorage.setItem("phone",phone);
            var email = $(obj).parent().parent().find("td").eq(4).text();
            localStorage.setItem("email",email);
            var address = $(obj).parent().parent().find("td").eq(5).text();
            localStorage.setItem("address",address);
            var username = $(obj).parent().parent().find("td").eq(6).text();
            localStorage.setItem("username",username);
            var password = $(obj).parent().parent().find("td").eq(7).text();
            localStorage.setItem("password",password);
            var role = $(obj).parent().parent().find("td").eq(9).text();
            localStorage.setItem("role",role);
            //打开模态框
            x_admin_show("修改用户","/manage-user-upd",600,400);
    }

    function userDelete(obj) {
        var userId = $(obj).parent().parent().find("td").eq(1).text();
        layer.confirm("确认要删除吗？",function (index) {
            $.ajax({
                url:"/manageUser/manage-deletedUser",
                type: "get",
                dataType: "json",
                data: {userId:userId},
                success:function (rs) {
                    if (rs.code == 200){
                        $(obj).parent().parent().remove();
                        layer.msg(rs.msg,{
                            icon:1,
                            time:1000
                        })
                    }
                }
            })
        })
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>

